class Thansbox{
    constructor(){
        this.tabLeft= document.querySelector(".tabLeft");
        this.tabRight=document.querySelector(".tabRight");
        this.loginbox=document.querySelector(".loginbox");
        this.loginbox1=document.querySelector(".loginbox1");
        this.addEvent();
    }
    addEvent(){
        const that=this;
        console.log(this.tabLeft);
        this.tabLeft.onclick = function(){
            that.loginbox.style.display="block";
            that.tabLeft.style.color="red";
            that.tabRight.style.color="#5e5e5e";
            that.loginbox1.style.display="none";
        },
        this.tabRight.onclick = function(){
            that.loginbox1.style.display="block";
            that.tabLeft.style.color="#5e5e5e";
            that.tabRight.style.color="red";
            console.log(that.tabLeft.style.color);
            that.loginbox.style.display="none";
        }
    }

}
new Thansbox();


//登录功能




const osubmit = document.getElementById("submit");
const otel = document.getElementById("login_id");
const opassword = document.getElementById("password");

osubmit.onclick = function(){
    ajax("http://localhost:3000/api",function(res){
        // console.log(res);
        res = JSON.parse(res);

        if(res.code === 0){
            alert("用户名不存在，请先注册");
            location.href = "./register.html";
        }else if(res.code === 1){
            // 登录成功之后，将登录成功信息，存到本地存储，方便其他功能或页面使用
            localStorage.setItem("isLogin","ok");
            localStorage.setItem("username",res.data);

            if(confirm("登录成功，是否跳转到首页")){
                location.href = "./index.html";
            }
        }else if(res.code === 2){
            alert("密码不符，请重新输入");
            opassword.value = "";
            opassword.focus();
        }
    },{
        type:"login",
        username:otel.value,
        password:opassword.value
    })
}
function ajax(url, callback, data){
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`
    }
    url += "?" + str;
    const xhr = new XMLHttpRequest();
    xhr.open("get",url)
    xhr.onload = function(){
        if(xhr.status === 200){
            callback(xhr.responseText)
        }
    }
    xhr.send();
}

//表单验证


    // var opd  = document.getElementById("password");
    // var otl = document.getElementById("login_id");
    // var oem = document.getElementById("email");
    // var osu = document.getElementById("submit");
    // var osu=false,pw=false,pw2=false,tel=false,em=false;
    // opd .onblur = function(){
    //     var span = this.nextElementSibling;
    //     var a = /\d/.test(this.value) ? 1 : 0;
    //     var b = /[a-z]/i.test(this.value) ? 1 : 0;
    //     var c = /[^a-z\d]/i.test(this.value) ? 1 : 0;
    //     switch(a+b+c){
    //         case 1:span.innerHTML = "弱";break;
    //         case 2:span.innerHTML = "中";break;
    //         case 3:span.innerHTML = "强";break;
    //     }
    //     opd  = true;

      
    // }
   
    // otl.onblur = function(){
    //     var span = this.nextElementSibling;
    //     if(/^1[3-9]\d{9}$/.test(this.value)){
    //         span.innerHTML = "ok";
    //         tel = true;
    //     }else{
    //         span.innerHTML = "no";
    //         tel = false;
    //     }
    // }
    // oem.onblur = function(){
    //     var span = this.nextElementSibling;
    //     if(/^[\w-]{2,10}@[\da-z]{2,10}\.[a-z]{2,4}$/.test(this.value)){
    //         span.innerHTML = "ok";
    //         em = true;
    //     }else{
    //         span.innerHTML = "no";
    //         em = false;
    //     }
    // }
    // osubmit.onclick = function(){
    //     if(un && pw && pw2 && tel && em){
    //         alert("登录成功")
    //     }else{
    //         alert("重新登录")
    //     }
    // }

